<!--修改密码-->
<template>
    <div class="home-g">
        <myHeader class="header" :returnFatherShow="true"></myHeader>
        <div class="home-center">
            <div class="left-logo">
                <p><img src="../../assets/img/login/logo-white.png" alt=""></p>
                <p>希古尚博-CRM客户关系管理系统</p>
                <p>SHIGOO SYMNOLE INVESTMENTS</p>
            </div>
            <div class="right-login">
                <p class="title">修改密码 / Modify the password　　<i class="iconfont icon-fanhui" @click="back"></i></p>
                <p class="input">
                    <i class="iconfont icon-mima" :style="{color: this.oldPwdIsFocus?'white':''}"></i>
                    <input
                            @focus="input(1)"
                            @blur="blur(1)"
                            type="password" placeholder="原密码" v-model="oldPwd" @keyup="enter($event)"/>
                </p>
                <p class="input">
                    <i class="iconfont icon-mima" :style="{color: this.newPwdIsFocus?'white':''}"></i>
                    <input
                            @focus="input(2)"
                            @blur="blur(2)"

                            type="password" placeholder="新密码" v-model="newPwd" @keyup="enter($event)"/>
                </p>
                <p class="input">
                    <i class="iconfont icon-mima" :style="{color: this.confirmPwdIsFocus?'white':''}"></i>
                    <input
                            @focus="input(3)"
                            @blur="blur(3)"

                            type="password" placeholder="再次输入密码" v-model="confirmPwd" @keyup="enter($event)"/>
                </p>
                <p class="button-p"><input class="login-button" type="button" @click="submit" value="确 定"/></p>
            </div>
            <p class="home-center-bottom-title">成都墨提斯科技有限公司版权所有</p>
        </div>
        <img class="bg-right" src="../../assets/img/common/bg-right.png" alt="">
    </div>
</template>

<script>
    import myHeader from '../common/header'
    import { updatePassword } from '../../service/api'
    import {mapState,mapMutations,mapActions} from 'vuex';

    export default {
        name: "revise",
        components: {
            myHeader
        },
        data() {
            return {
                oldPwd:'',
                newPwd:'',
                confirmPwd:'',
                oldPwdIsFocus: false,
                newPwdIsFocus: false,
                confirmPwdIsFocus: false
            }
        },
        computed:{
            ...mapState({
                userInfo: state => state.login.userInfo
            }),
        },
        methods: {
            input(f) {
                f == 1 ? this.oldPwdIsFocus = true : f==2?this.newPwdIsFocus=true : this.confirmPwdIsFocus = true
            },
            blur() {
                this.oldPwdIsFocus = false;
                this.newPwdIsFocus = false;
                this.confirmPwdIsFocus = false;
            },
            async submit(){
                if (!this.oldPwd || !this.newPwd || !this.confirmPwd) {
                    this.$utils.openMessgeTip('请填写完整信息', '提示');
                    return
                } else if (this.newPwd != this.confirmPwd) {
                    this.$utils.openMessgeTip('新密码与确认密码不一致', '提示');
                    return
                }
                let submitData = {
                    password: this.newPwd,
                    rem_password: this.confirmPwd,
                    old_password: this.oldPwd,
                    mobile: this.userInfo[0].SMS
                };
                const { code, data, message } = await updatePassword(submitData);
                if (code == 200) {
                    this.$message({
                        message: '恭喜你，密码修改成功！',
                        type: 'success'
                    });
                    this.$router.push({
                        path: '/Login'
                    });
                } else {
                    this.$utils.openMessgeTip(message, '提示')
                }
            },
            enter(e){
                if(e.key=== 'Enter'){
                    this.submit()
                }
            },
            back() {
                this.$router.push({
                    path: '/home/orderManage'
                });
            },
        }
    }
</script>

<style lang="less" scoped>
    @import 'http://at.alicdn.com/t/font_729010_3iv9wsswste.css';
    @import "style.less";
</style>